﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/blank.Master" AutoEventWireup="true" CodeBehind="syntaxhighlighter.aspx.cs" Inherits="Template.Web.Admin.syntaxhighlighter" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <section class="wrapper site-min-height">
        <!-- page start-->
        <div class="col-xs-12">
            <section class="panel panel-primary">
                <header class="panel-heading"><i class="fa fa-search"></i>方式1：指定语言</header>
                <div class="panel-body">
                    <pre class="brush: xml; toolbar:false;">
                        1.首先头部需要引入两个css文件,styles/shCore.css,和styles/shThemeRDark.css,第二个是主题css,以根据个人喜好更换,插件提供了很多样式
                        2.引入js文件,scripts/shCore.js必须引入,然后引入需要用到语言的js,本例需要用到shBrushJScript.js.
                        3.在pre中贴入代码 &lt;pre class="brush:js;"&gt;&lt;/pre&gt; 本例是js，所以 brush 对应js
                        4.如果想要现实完整的&lt;html&gt;&lt;/html&gt;这种标签，就得转义。可以用html在线转义工具 http://www.css88.com/tool/html-escape/
                        <script src="/scripts/syntaxhighlighter/js/shCore.js"></script>
                        <script src="/scripts/syntaxhighlighter/js/shBrushJScript.js"></script>>
                        <link rel="stylesheet" type="text/css" href="/scripts/syntaxhighlighter/css/shCore.css" />
                        <link rel="stylesheet" type="text/css" href="/scripts/syntaxhighlighter/css/shThemeRDark.css" />
                        <script type="text/javascript">SyntaxHighlighter.all();</script>
                         
                        <pre class="brush: js; toolbar:false;">
                            
                            ...想要高亮的代码
                        </pre>
                    </pre>
                </div>
            </section>
        </div>

        <div class="col-xs-12" id="simplePanel">
            <section class="panel panel-primary">
                <header class="panel-heading"><i class="fa fa-search"></i>方式2：自动加载（不需要加载单个js，用一个loader加载所需要的js文件）</header>
                <div class="panel-body">
                    <div class="col-md-12">
                        <pre class="brush: js; toolbar:false;">
                            引入
                            <script src="/scripts/syntaxhighlighter/js/shCore.js"></script>
                            <script src="/scripts/syntaxhighlighter/js/shAutoloader.js"></script>
                            生效前加入如下代码：
                            $(document).ready(function () {
                                SyntaxHighlighter.autoloader(
                                           ['js', 'jscript', 'javascript', '/scripts/syntaxhighlighter/scripts/shBrushJScript.js'],
                                           ['css', '/scripts/syntaxhighlighter/scripts/shBrushCss.js'],
                                           ['xml', 'html', '/scripts/syntaxhighlighter/scripts/shBrushXml.js'],
                                           ['sql', '/scripts/syntaxhighlighter/scripts/shBrushSql.js'],
                                           ['c#', '/scripts/syntaxhighlighter/scripts/shBrushCSharp.js'],
                                           ['php', '/scripts/syntaxhighlighter/scripts/shBrushPhp.js']
                                   );
                                SyntaxHighlighter.all();
                            });
                            Syntaxhighlighter需要用此方法先把对应brush的js识别一遍,才能达到自动根据pre标签进行判断,
                            还有最后一个注意点,那就是这些代码js的路径书写,一定要写对路径,否则是load不进来的.
                        </pre>
                    </div>
                </div>
            </section>
        </div>
        <!-- page end-->
    </section>
    
</asp:Content>
